const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

const cvs = document.getElementById('canvas1')
const ctx1 = cvs.getContext('2d')

cvs.width = window.innerWidth * window.devicePixelRatio
cvs.height = window.innerHeight * window.devicePixelRatio


const fontSize = 20 * devicePixelRatio

ctx1.font = `${fontSize}px "Roboto Mono"`

const columnCount = Math.floor(window.innerWidth / fontSize)
const chartIndex = new Array(columnCount).fill(0)

function draw() {
  ctx1.fillStyle = 'rgba(0,0,0,0.2)'
  ctx1.fillRect(0,0,canvas.width, canvas.height)
  ctx1.fillStyle = '#fff'
  ctx1.textBaseline = 'top'
  for (let i = 0; i < columnCount; i++) {
    const text = getRandomStr()
    const x= fontSize * i, y = fontSize * chartIndex[i]
    ctx1.fillText(text, x, y)
    if (y > canvas.height && Math.random() > 0.95) {
      chartIndex[i] = 0
    } else {
      chartIndex[i]++
    }
  }
}

class Point {
  constructor() {
    this.r = 4;
    this.xMax = canvas.width - this.r
    this.yMax = canvas.height - this.r
    this.x = getRandom(this.xMax, this.r)
    this.y = getRandom(this.yMax, this.r)
    this.xSpeed = getRandom(-50, 50)
    this.ySpeed = getRandom(-50, 50)
    this.lastTime = null
  }
  draw() {
    if (this.lastTime) {
      const timeDiff = (Date.now() - this.lastTime) / 1000
      const xDis = timeDiff * this.xSpeed
      const yDis = timeDiff * this.ySpeed
      const newX = this.x - xDis
      if (newX > this.xMax) {
        this.x = this.xMax
        this.xSpeed = this.xSpeed * -1
      } else if (newX < this.r) {
        this.x = this.r
        this.xSpeed = -this.xSpeed
      } else {
        this.x = newX
      }
      const newY = this.y - yDis
      if (newY > this.yMax) {
        this.y = this.yMax
        this.ySpeed = this.ySpeed * -1
      } else if(newY < this.r) {
        this.y = this.r
        this.ySpeed = -this.ySpeed
      } else {
        this.y = newY
      }
    }
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    ctx.fillStyle = '#fff'
    ctx.fill();
    this.lastTime = Date.now()
  }
}

class Graph {
  constructor(num = 30, max = 300) {
    this.point = new Array(num).fill(0).map(() => new Point())
    this.maxDistance = max
  }
  draw() {
    requestAnimationFrame(() => {
      draw()
      this.draw()
    })
    ctx.clearRect(0,0,canvas.width, canvas.height)
    for (let i = 0; i < this.point.length; i++) {
      const p1 = this.point[i]
      p1.draw()
      for (let j = i+1; j < this.point.length; j++) {
        const p2 = this.point[j]
        const pointDistance = getPointDistance(p1, p2)
        if (pointDistance < this.maxDistance) {
          ctx.beginPath();
          ctx.moveTo(p1.x, p1.y);
          ctx.lineTo(p2.x, p2.y);
          ctx.strokeStyle = `rgba(255,255,255, ${1 - (pointDistance / this.maxDistance)})`
          ctx.stroke()
        }
      }
    }
  }
}

function init() {
  canvas.width = window.innerWidth * window.devicePixelRatio
  canvas.height = window.innerHeight * window.devicePixelRatio
  const g = new Graph(100, 200)
  g.draw()
}

init()
